<template>
  <div class="page-add-order">
    <div class="info-wrap">
      <div class="info-item" @click="toSelectUser">
        <div class="info-name">
          <img src="/static/images/order/user.png">
          <span class="require">*</span>
          购买用户
        </div>
        <div class="picker date" :class="dataForm.realName ? '':'disabled'">
          {{dataForm.realName ? dataForm.realName :
          "请选择下单用户"}}
        </div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item" @click="toSelectService">
        <div class="info-name">
          <img src="/static/images/order/service.png">
          <span class="require">*</span>
          购买服务套餐
        </div>
        <div class="picker date" :class="dataForm.goodsName ? '':'disabled'">
          {{dataForm.goodsName ? dataForm.goodsName :
          "请选择服务套餐"}}
        </div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item" @click="toSelectGoods">
        <div class="info-name">
          <img src="/static/images/order/product.png">
          <span class="require">*</span>
          添加产品
        </div>
        <div class="picker date"></div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item" @click="toSelectPay">
        <div class="info-name">
          <img src="/static/images/order/pay-type.png">
          <span class="require">*</span>
          下单方式
        </div>
        <div class="picker"></div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item" @click="toSelectAddress">
        <div class="info-name">
          <img src="/static/images/order/cosigee.png">
          <span class="require">*</span>
          收货信息
        </div>
        <div class="picker"></div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item">
        <div class="info-name">
          <img src="/static/images/order/logitics.png">
          <span class="require">*</span>
          快递公司
        </div>
        <picker mode="selector" :range="logistics" range-key="logisticsName" @change="changeLogistics"
                :value="dataForm.logisticsId">
          <div class="picker" :class="dataForm.logisticsName ? '':'disabled'">
            {{dataForm.logisticsName ? dataForm.logisticsName :
            "请选择快递公司"}}
            <img class="icon" src="/static/images/common/right.png">
          </div>
        </picker>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
      <div class="info-item" @click="toSelectOther">
        <div class="info-name">
          <img src="/static/images/order/user.png">
          <span class="require">*</span>
          其他信息
        </div>
        <div class="picker"></div>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
    </div>
    <div class="btn-submit" @click="save">确定提交</div>
  </div>
</template>

<script>
  import _ from "lodash";

  export default {
    data() {
      return {
        dataForm: {
          serviceGoodsNum: 1,
          goodsName: "",
          realName: "",
          logisticsId: "",
          logisticsName: "",
          channelName: '',
        },
        logistics: [],
        channelList: [],
      };
    },
    components: {},
    methods: {
      changeLogistics(e) {
        const logistic = this.logistics[ e.mp.detail.value ];
        this.dataForm.logisticsId = logistic.id;
        this.dataForm.logisticsName = logistic.logisticsName;
      },
      toSelectOther() {
        wx.navigateTo({
          url: "/pages/add-other/main"
        });
      },
      toSelectAddress() {
        wx.navigateTo({
          url: "/pages/add-address/main"
        });
      },
      toSelectPay() {
        wx.navigateTo({
          url: "/pages/add-pay/main"
        });
      },
      toSelectGoods() {
        if (!App.selectUser) {
          wx.showToast("请先选择购买用户");
          return false;
        }
        if (!App.selectService) {
          wx.showToast("请先选择服务套餐");
          return false;
        }
        wx.navigateTo({
          url: "/pages/add-goods/main"
        });
      },
      toSelectService() {
        wx.navigateTo({
          url: "/pages/select-service/main"
        });
      },
      toSelectUser() {
        wx.navigateTo({
          url: "/pages/select-user/main"
        });
      },
      async save() {
        if (!App.selectUser) {
          wx.showToast("请选择下单用户");
          return false;
        }
        if (!App.selectService) {
          wx.showToast("请选择服务套餐");
          return false;
        }
        if (!App.orderPayType) {
          wx.showToast("请选择下单方式");
          return false;
        }
        if (App.orderPayType === 2 && !App.servicePayVO.length) {
          wx.showToast("请添加付款方式");
          return false;
        }
        if (App.orderPayType === 3 && !App.serviceFullPayVO.payType) {
          wx.showToast("请选择付款方式");
          return false;
        }
        if (!App.addressForm) {
          wx.showToast("请填写收货信息");
          return false;
        }
        if (!this.dataForm.logisticsId) {
          wx.showToast("请选择快递公司");
          return false;
        }
        if (!App.otherForm) {
          wx.showToast("请填写其他信息");
          return false;
        }
        const params = Object.assign(this.dataForm, App.addressForm, App.otherForm);
        params.orderGoodsList = App.giftList;
        if (App.orderPayType === 2) {
          const list = _.cloneDeep(App.servicePayVO);
          list.forEach(data => {
            if (data.partPayAmount) {
              data.partPayAmount = data.partPayAmount * 10000 / 100;
            }
          });
          params.servicePayVO = list;
        } else {
          params.servicePayVO = [ App.serviceFullPayVO ];
        }
        if (this.dataForm.abroadAddress === 1) {
          this.dataForm.logisticsId = 2;
          this.dataForm.logisticsName = "EMS";
          params.abroadLogisticsFee = parseInt(params.abroadLogisticsFee * 100);
        }
        if (!params.saleUserId) {
          params.saleUserId = App.sysUserId;
        }
        const result = await wx.request({
          method: "POST",
          url: this.id ? "/bg/order/modifyService" : "/bg/order/addService",
          data: params,
          header: { "content-type": "application/json;charset=UTF-8" }
        });
        if (result.code === 200) {
          wx.showModal({
            content: "保存成功",
            showCancel: false,
            success: result => {
              if (result.confirm) {
                wx.navigateBack();
              }
            }
          });
        } else {
          wx.showToast(result.message);
        }
      },
      bindUserTagChange(e) {
        const userTag = this.userTagList[ e.mp.detail.value ];
        this.dataForm.userTag = userTag.id;
        this.dataForm.userTagName = userTag.name;
      },
      async loadChannel() {
        const result = await wx.request({
          url: "/bg/regChannel/listPage",
          data: {
            page: 1,
            pageSize: 50
          }
        });
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            list.push(_.pick(data, [ "id", "channelName" ]));
          });
          this.channelList = list;
        } else {
          wx.showToast(result.message);
        }
      },
      initLogistics() {
        //this.dataForm.logisticsId = "";
        //this.dataForm.logisticsName = '';
        if (App.orderPayType === 3) {
          this.logistics = App.isLeader === 1 ? [
            {
              id: 1,
              logisticsName: "顺丰1"
            }, {
              id: 10,
              logisticsName: "顺丰2"
            }, {
              id: 2,
              logisticsName: "EMS"
            }, {
              id: 6,
              logisticsName: "圆通快递"
            }, {
              id: 4,
              logisticsName: "中通快递"
            }, {
              id: 7,
              logisticsName: "韵达快递"
            }, {
              id: 5,
              logisticsName: "申通1"
            }, {
              id: 11,
              logisticsName: "申通2"
            }
          ] : [ 2, 3, 14, 17, 19 ].includes(App.serviceFullPayVO.payType) ? [
            {
              id: 5,
              logisticsName: "申通1"
            }
          ] : [
            {
              id: 11,
              logisticsName: "申通2"
            }
          ];
          this.dataForm.logisticsId = [ 2, 3, 14, 17, 19 ].includes(this.serviceFullPayVO.payType) ? 5 : 11;
        } else {
          const flag = App.servicePayVO.some(servicePay => {
            return [ 2, 3, 14, 17, 19 ].includes(servicePay.payType);
          });
          if (flag) {
            this.logistics = [
              {
                id: 1,
                logisticsName: "顺丰1"
              },
              {
                id: 2,
                logisticsName: "EMS"
              }
            ];
            this.dataForm.logisticsId = 1;
          } else {
            this.logistics = [
              {
                id: 10,
                logisticsName: "顺丰2"
              },
              {
                id: 2,
                logisticsName: "EMS"
              }
            ];
            this.dataForm.logisticsId = 10;
          }
        }
        if (App.orderPayType === 2) {
          let payAmount = 0;
          App.servicePayVO.forEach(servicePay => {
            console.info(servicePay);
            if (servicePay.partPayAmount && servicePay.payType) {
              payAmount += parseInt(servicePay.partPayAmount);
            }
          });
          if (App.selectService && (App.selectService.price - App.selectService.promotionPrice) / 100 <= payAmount) {
            const flag = App.servicePayVO.some(servicePay => {
              return [ 2, 3, 14, 17, 19 ].includes(servicePay.payType);
            });
            if (flag) {
              this.logistics = [
                {
                  id: 5,
                  logisticsName: "申通1"
                }
              ];
              this.dataForm.logisticsId = 5;
            } else {
              this.logistics = [
                {
                  id: 11,
                  logisticsName: "申通2"
                }
              ];
              this.dataForm.logisticsId = 11;
            }
          }
        }
        this.logistics.push({
          id: 8,
          logisticsName: "自提"
        });
        this.logistics.push({
          id: 9,
          logisticsName: "不需要发货"
        });
      },
      async loadChannel() {
        const result = await wx.request({
          url: '/bg/regChannel/listPage',
          data: {
            page: 1,
            pageSize: 50
          }
        });
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            list.push(_.pick(data, [ 'id', 'channelName' ]));
          });
          this.channelList = list;
        } else {
          wx.showToast(result.message);
        }
      },
    },
    async onShow() {
      await this.loadChannel();
      console.info(App.addressForm)

      if (App.selectUser) {
        this.dataForm.userId = App.selectUser.userId;
        this.dataForm.userInfoId = App.selectUser.userInfoId;
        this.dataForm.realName = App.selectUser.realName;
        const userResult = await wx.request({
          url: "/bg/user/detail",
          data: {
            userId: this.dataForm.userId
          }
        });
        if (userResult.code === 200) {
          App.userIntegral = userResult.data.integral;
        }
        if(!App.addressForm || !App.addressForm.provinceId){
          const rebuyAddressResult = await wx.request({
            url: "/bg/order/getRebuyOrderAddress",
            data: {
              userId: this.dataForm.userId
            }
          });
          if (rebuyAddressResult.code === 200) {
            delete rebuyAddressResult.data.utime;
            App.addressForm = rebuyAddressResult.data
          } else {
            App.addressForm = {
              consigneeMobile: App.selectUser.mobile,
              consignee: App.selectUser.realName,
              provinceId: App.selectUser.provinceId,
              provinceName: App.selectUser.provinceName,
              cityId: App.selectUser.cityId,
              cityName: App.selectUser.cityName,
              areaId: App.selectUser.areaId,
              areaName: App.selectUser.areaName,
              streetId: App.selectUser.streetId,
              streetName: App.selectUser.streetName,
              consigneeAddress: App.selectUser.address,
              abroadAddress: App.selectUser.abroadAddress,
            }
          }
        }
      }
      if (App.selectService) {
        this.dataForm.serviceGoodsId = App.selectService.goodsId;
        this.dataForm.goodsName = App.selectService.goodsName;
        App.giftList = App.selectService.goodsGiftList || [];
      }
      this.initLogistics();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-add-order {
    .info-wrap {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      .info-item {
        position: relative;
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        min-height: pxToRem(112);
        .info-name {
          display: flex;
          align-items: center;
          @include middle-center-y();
          left: 0;
          font-size: pxToRem(28);
          img {
            margin-right: pxToRem(20);
            width: pxToRem(28);
            height: pxToRem(28);
          }
          .require {
            color: #D0021B;
          }
        }
        .unit, .btn-right {
          @include middle-center-y();
          right: 0;
          color: #9B9B9B;
          font-size: pxToRem(28);
        }
        .btn-right {
          width: pxToRem(14);
          height: pxToRem(26);
        }
        input, .radio-group, .picker {
          padding: 0 pxToRem(30) 0 pxToRem(300);
          font-size: pxToRem(28);
          line-height: pxToRem(112);
          box-sizing: border-box;
          height: pxToRem(112);
          @include ellipsis();
          &::-webkit-input-placeholder {
            color: #9B9B9B;
          }
          &.select {
            color: #4a4a4a;
          }
        }
        .picker-list {
          display: flex;
          align-items: center;
          padding-left: pxToRem(300);
          width: 100%;
          box-sizing: border-box;
          .picker {
            flex: 1;
            padding-left: 0;
            line-height: pxToRem(112);
            box-sizing: border-box;
            height: pxToRem(112);
            font-size: pxToRem(28);
          }
        }
        .disabled {
          color: #707070;
        }
        .radio {
          margin-right: pxToRem(50);
          font-size: pxToRem(28);
          .label {
            margin-left: pxToRem(5);
            font-size: pxToRem(28);
          }
        }
      }
    }
    .btn-submit {
      @include middle-center-x();
      bottom: pxToRem(40);
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
